<script setup>
import {
  ref,
  defineProps,
  // toRef,
  // ,toRefs,
} from 'vue';

const props = defineProps({
  color: String,
  data: {
    type: Object,
    default: () => {},
  },
});
// 如果是这一行color不会更改, 应该使用toRef或者toRefs
const colorChild = ref(props.color);
// const colorChild = toRef(props, 'color');
// const { color } = toRefs(props);

</script>

<template>
  <button>
    Color is: {{ colorChild }}
  </button>
  <button>
    Color2 is: {{ color }}
  </button>
  <p>{{ data }}</p>
</template>

<style scoped>
button {
  color: v-bind(color);
}
</style>
